<template>
  <div class="global-header">
    <div class="header-title-container">
      <div class="header-title glow-text">〈〈 上海AiOps云计算集训营 By DriverZeng（曾老湿） 〉〉</div>
    </div>
  </div>
</template>

<script setup lang="ts">
// Vue 3 Composition API - no need for explicit export
</script>

<style lang="scss" scoped>
/* Global Header Styles */
.global-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 40px !important;
  background-color: rgba(7, 15, 35, 0.9) !important;
  z-index: 1000 !important; /* Ensure it's above other elements */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 2px 15px rgba(7, 15, 35, 0.9) !important;
  border-bottom: 1px solid rgba(61, 199, 255, 0.4) !important;
  overflow: hidden !important;
  
  /* 添加高科技风格边缘效果 */
  &::before, &::after {
    content: '' !important;
    position: absolute !important;
    height: 1px !important;
    width: 100% !important;
    background: linear-gradient(
      to right,
      transparent,
      rgba(61, 199, 255, 0.7),
      rgba(255, 255, 255, 0.8),
      rgba(61, 199, 255, 0.7),
      transparent
    ) !important;
  }
  
  &::before {
    top: 0 !important;
    left: 0 !important;
    animation: slide-right 8s infinite linear !important;
  }
  
  &::after {
    bottom: 0 !important;
    right: 0 !important;
    animation: slide-left 8s infinite linear !important;
  }
}

/* 标题容器 */
.header-title-container {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 标题文本 */
.header-title {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #e6e6e6 !important;
  text-shadow: 0 0 10px rgba(61, 199, 255, 0.7) !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
}

@keyframes title-pulse {
  0%, 100% {
    text-shadow: 0 0 5px rgba(61, 199, 255, 0.7) !important;
  }
  50% {
    text-shadow: 0 0 15px rgba(61, 199, 255, 1), 0 0 20px rgba(255, 255, 255, 0.5) !important;
  }
}

@keyframes slide-right {
  from { transform: translateX(-100%) !important; }
  to { transform: translateX(100%) !important; }
}

@keyframes slide-left {
  from { transform: translateX(100%) !important; }
  to { transform: translateX(-100%) !important; }
}

/* 添加脉冲呼吸效果 */
.glow-text {
  animation: title-pulse 3s infinite alternate !important;
}
</style> 